<template>
  <!--订单明细-->
  <div class="Details">
    <mt-header fixed title="业务员列表">
      <router-link to="" slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)"
          >返回</mt-button
        >
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div class="Details_top">
      <img src="../../../static/image/currentduan.png" />
    </div>
    <div class="Details_nav">
      <div class="Details_logo">
        <img :src="headImgUrl" />
      </div>
      <div class="Details_txt">{{ payUserName }}</div>
      <div class="Details_money">￥{{ price / 100 }}</div>
    </div>

    <div class="Details_list">
      <div class="Details_list_oitem">
        <div class="Details_list_left">标价</div>
        <div class="Details_list_right">￥{{ price / 100 }}</div>
      </div>

      <div class="Details_list_oitem">
        <div class="Details_list_left">商品名称</div>
        <div class="Details_list_right">{{ goodsName }}</div>
      </div>

      <div class="Details_list_oitem">
        <div class="Details_list_left">支付时间</div>
        <div class="Details_list_right">{{ payTime }}</div>
      </div>

      <div class="Details_list_oitem">
        <div class="Details_list_left">交易单号</div>
        <div class="Details_list_right">{{ transactionId }}</div>
      </div>

      <div class="Details_list_oitem">
        <div class="Details_list_left">商户单号</div>
        <div class="Details_list_right">{{ orderId }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { columnDetail, Detailorder } from "../../api/api";
import querystring from "query-string";
import { InfiniteScroll, Toast, Header } from "mint-ui";

export default {
  name: "SaDetails",
  data() {
    return {
      orderid: "",
      headImgUrl: "",
      payUserName: "",
      price: "",
      directPrice: "",
      goodsName: "",
      branchName: "",
      directName: "",
      payTime: "",
      transactionId: "",
      orderId: "",
      iosShow: false
    };
  },
  created() {
    this.orderid = this.$route.query.orderid;
    this.Phonetype();
  },
  methods: {
    Detailorder() {
      var params = {
        orderId: this.orderid,
        type: 2
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Detailorder(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.headImgUrl = res.data.data.headImgUrl;
          this.payUserName = res.data.data.payUserName;
          this.price = res.data.data.price;
          this.directPrice = res.data.data.directPrice;
          this.goodsName = res.data.data.goodsName;
          this.branchName = res.data.data.branchName;
          this.directName = res.data.data.directName;
          this.payTime = res.data.data.payTime;
          this.transactionId = res.data.data.transactionId;
          this.orderId = res.data.data.orderId;
        } else {
          Toast(res.data.message);
        }
      });
    },
    //判断是安卓还是ios
    Phonetype() {
      let ua = navigator.userAgent;
      console.log(ua); //Ios终端
      //Android终端
      //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
      // console.log(isAndroid)
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (!isiOS) {
        this.iosShow = true;
      }
    }
  },
  mounted() {
    this.Detailorder();
  }
};
</script>
<style lang="scss" scoped>
.mint-header {
  background: #ffffff;
  color: #333333;
}
.Details {
  width: 100%;
  height: auto;
  padding-top: 40px;
}

.Details_top {
  width: 100%;
  height: 1.7rem;
}

.Details_top img {
  width: 100%;
  height: 100%;
  display: block;
}

.Details_nav {
  width: 100%;
  height: 3.88rem;
  margin-top: 0.31rem;
  text-align: center;
  border-bottom: 0.1rem solid #f8f9fe;
}

.Details_logo {
  width: 2.06rem;
  height: 2.06rem;
  border-radius: 50%;
  margin: auto;
  overflow: hidden;
}

.Details_logo img {
  width: 2.06rem;
  height: 2.06rem;
}

.Details_txt {
  color: #212c67;
  margin-top: 0.25rem;
  font-size: 0.32rem;
}

.Details_money {
  font-size: 0.3rem;
  color: #ffb400;
  margin-top: 0.17rem;
}

.Details_list {
  width: 100%;
  height: auto;
}

.Details_list_oitem {
  width: 100%;
  height: 0.9rem;
  display: flex;
  border-bottom: 0.02rem solid #eee;
  align-items: center;
  font-size: 0.28rem;
}

.Details_list_left {
  width: 30%;
  margin-left: 0.8rem;
  color: #666666;
}

.Details_list_right {
  width: 60%;
  color: #666666;
  margin-left: 0.1rem;
}
</style>